<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/login.css">
    <script src="../js/request.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/loading.js"></script>
</head>

<body>
    <div class="box">
        <div class="head">
            <div class="head_top width clearfix">
                <img src="../images/logo.png">
                <div class="search_nav right">
                    <input type="text" placeholder="请输入想要的商品">
                    <button id="search">搜索</button>
                </div>
            </div>
            <div class="head_dw width clearfix">
                <ul>
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="./login.html">登录</a></li>
                    <li class="active"><a href="./register.html">注册</a></li>
                </ul>
            </div>
        </div>
        <div class="nav width">
            <div class="login_nav">
                <div class="user">
                    <div class="alert">username</div>
                    <input type="text" placeholder="请输入用户名">
                </div>
                <div class="password">
                    <div class="alert2">password</div>
                    <input type="password" placeholder="请输入密码">
                </div>
                <button class="registe">注册</button>
                <a href="../view/login.html"></a>
            </div>
        </div>
    </div>
</body>
<script>
    var loader = createLoading({
        src: '../images/loading.jpg',
    }).show();    
    var input = document.querySelectorAll(".login_nav input");
    var alert1 = document.querySelector(".alert");
    var alert2 = document.querySelector(".alert2");

    input[0].onfocus = function () {
        alert1.style.opacity = "0";
    }
    input[0].oninput = function () {
        var username = input[0].value;
        var userreg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/g;
        if (userreg.test(username)) {
            alert1.style.opacity = "1";
            alert1.innerHTML = "用户名合法";
            alert1.style.color = "green";
        } else {
            alert1.style.opacity = "1";
            alert1.innerHTML = "字母开头，允许5-16字节，允许字母数字下划线";
            alert1.style.color = "red";
        }
    }

    input[1].onfocus = function () {
        alert2.style.opacity = "0";
    }
    input[1].oninput = function () {
        var pwd = input[1].value;
        var pwdreg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/g;
        if (pwdreg.test(pwd)) {
            alert2.style.opacity = "1";
            alert2.innerHTML = "密码合法";
            alert2.style.color = "green";
        } else {
            alert2.style.opacity = "1";
            alert2.innerHTML = "必须包含大小写字母和数字的组合，可以使用特殊字符，长度在6-15之间";
            alert2.style.color = "red";
        }
    }

    var register = document.querySelector(".registe");
    register.addEventListener("click", function () {
        var username = input[0].value;
        var pwd = input[1].value;
        api.Register({
            username: username,
            password: pwd,
        }, function (data) {
            console.log(data);
            if (data.code == 1) {
                alert("注册成功");
                setTimeout(() => {                    
                    location.href = "../view/login.html";
                }, 1000);
            } else {
                alert("注册失败,请重新注册账号");
            }
        })
    })
    setTimeout(() => {
        loader.hide();
    }, 1000);

</script>

</html>